import { saveBatchOrder } from '@/services/ant-design-pro/api';
import { useRequest } from '@@/exports';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import React, { useEffect } from 'react';

export type UpdateFormProps = {
  reload: () => void;
  onConfirm: (values: any) => void;
  record: Record<string, any>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [messageApi, contextHolder] = message.useMessage();
  const [form] = useForm();
  const { reload, record } = props;
  const { run } = useRequest(saveBatchOrder, {
    manual: true,
    onSuccess: () => {
      reload();
      messageApi.success('修改成功');
    },
    onError: (error) => {
      messageApi.error(error.message);
    },
  });
  const initData = () => {
    form.setFieldsValue(record);
  };
  useEffect(() => {
    initData();
  }, []);
  return (
    <>
      {contextHolder}
      <ModalForm
        onFinish={async (value) => {
          await run({ ...value, orderId: record.rowId } as API.BatchOrder);
          return true;
        }}
        form={form}
        title={'修改'}
        trigger={<Button type="link">修改</Button>}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '请输入公司名称',
            },
          ]}
          placeholder="请输入公司名称"
          width="md"
          name="companyName"
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '请输入联系人',
            },
          ]}
          placeholder="请输入联系人"
          width="md"
          name="contactNo"
        />
        <ProFormText placeholder="请输入备注" width="md" name="remark" />
      </ModalForm>
    </>
  );
};

export default UpdateForm;
